<template>
	<div id="app" class="appMainDiv">
		<!--
		主入口用于开发时获取session
		<div id="nav">
		  <router-link to="/">Home</router-link> |
		  <router-link to="/about">About</router-link>
		</div>
		-->
		<template v-if="isIE">
			<div class="msgDiv">
				<div class="msgContent">
					<div class="iconDiv">
						<i class="awsui-iconfont">&#xe635;</i>
					</div>
					<div class="msgTitle">浏览器不支持</div>
					<div class="msgText">建议使用谷歌或火狐等现代浏览器</div>
				</div>
			</div>
		</template>
		<template v-else>
			<router-view />
		</template>
	</div>
</template>
<script>
	export default {
		computed: {
			isIE() {
				return window.navigator.userAgent.indexOf('MSIE') > -1 || window.navigator.userAgent.indexOf('Trident') > -1
			},
		}
	}
</script>
<style scoped>
	.appMainDiv {
		height: 100%;
		width: 100%;
	}

	div {
		box-sizing: border-box;
	}

	.msgDiv {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		overflow: hidden;
	}

	.msgContent {
		width: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: auto;
		text-align: center;
		transform: translate(-50%,-50%);
	}

	.iconDiv i {
		font-size: 79px;
		color: #a8a8a8;
	}

	.msgTitle {
		padding-top: 10px;
		line-height: 25px;
		color: #666;
		width: 100%;
		font-size: 16px;
	}

	.msgText {
		padding-top: 5px;
		font-size: 14px;
		line-height: 20px;
		color: #999;
		width: 100%;
	}
</style>
